import React, { Component } from 'react'
import Dimensions from 'react-dimensions'
import ReactDOM from 'react-dom';
import Query from './Query'
import { ModalForm } from '../../../components'
import { fetchData } from '../../../components/AjaxConsumer'
import SelectUrl from '../../../components/SelectUrl'
import { Modal, Form, message, Table, Button, Row, Col, Input,Select } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
import Actions from './ActionStore/Actions'
export default class ClosePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            dataSource: null,
            pagination: {pageSize:80,current:1},
            selectedRowKeys: [],
        };
        //reflux中的监听
        this.unsubscribe = Actions.searchCondition.listen( (values) => {
            //将query中的查询条件放到this.par中
            this.values = values
            //并且触发查询
            this.getTableData({pageSize:'80',current:'1',...values})
        });
        this.columns = [
            {
                title: '条码',
                dataIndex: 'proBarcode',
                width: '25%',
                render(text){
                    return <span title={text}>{text}</span>
                  }
            }, {
                title: '库位',
                dataIndex: 'wlCode',
                width: '10%',
                render(text){
                    return <span title={text}>{text}</span>
                  }
            }, {
                title: '库存状态',
                dataIndex: 'stauts',
                width: '10%',
                render: (text, record, index) => this.renderColumns(text),
            }, {
                title: '入库单号',
                dataIndex: 'orderNo',
                width: '15%',
                render(text){
                    return <span title={text}>{text}</span>
                  }
            }, {
                title: '批次',
                dataIndex: 'batchNo',
                width: '10%',
                render(text){
                    return <span title={text}>{text}</span>
                  }
            }, {
                title: '入库时间',
                dataIndex: 'proInDate',
                width: '18%',
                render(text){
                    return <span title={text}>{text}</span>
                  }
            }, {
                title: '库龄',
                dataIndex: 'proInDateToNowDays',
                width: '10%'
            }, {
                title: '冻结原因',
                dataIndex: 'lockReason',
                width: '12%',
                render: (text, record, index) => this.renderColumns1(text),
            }
        ];
    }
    //ajax函数
    getTableData = (values) => {
        let value = {
            wlCode: this.state.wlCode,
            materialCode: this.state.materialCode,
            productType: this.state.productType,
            stauts: this.state.stauts,
            ...values
        };
        //loading效果
        this.setState({ loading: true });
        //查询条件整理
        const options = {
            url: '/wmsrest/product/odsprostoragesn/r/detail/',
            type: 'get',
            condition: {
                ...value
            }
        };
        //发起请求
        fetchData(this, options, (res) => {
            //回调函数
            const pagination = { ...this.state.pagination };
            pagination.total = res.data.length;
            console.log(pagination.current+"---------"+ res.data.length +"-----------"+pagination.pageSize);
            this.setState({
                loading: false,
                dataSource: res.data,
                pagination,
            });
        })
    }
    renderColumns(text) {
        if(text == '0'){
            return (<span>可用</span>);
        }else if(text == '1'){
            return (<span>冻结</span>);
        }else if(text == '2'){
            return (<span>已出库</span>);
        }else if(text == '3'){
            return (<span>抽检冻结</span>);
        }
    }

    renderColumns1(text) {
        if(text == '2'){
            return (<span>质量冻结</span>);
        }else if(text == '4'){
            return (<span>手工冻结</span>);
        }
    }

    componentDidMount(){
        this.setState({
            selectedRowKeys:[],
            dataSource:null,
            selectedRows: null
        });
    }
    // 组件参数实例化-仅一次
    componentWillMount(){
        this.setState({
            selectedRowKeys:[],
            dataSource:null,
            selectedRows: null
        });
    }

    // 修改属性后刷新-n次
    componentWillReceiveProps(nextProps){
        if(nextProps.init){

        }
        let tmpFormData = nextProps.formData;
        let url = nextProps.submitUrl;

            this.setState({
                selectedRowKeys:[],
                selectedRows: null
            });
    }
    //显示弹框
    showModal = () => {
        this.setState({
            visible: true,
        });
    }
    // 隐藏弹出框
    hideModal = () => {
        this.setState({
            visible: false,
        });
    }

    handleOk = () => {
        this.setState({
            visible: false,
            selectedRowKeys: [],
            selectedRows: null
        });
        this.props.refreshHandle();
    }

    handleCancel = () => {
        this.setState({
            visible: false,
            selectedRowKeys: [],
            selectedRows: null
        });
        this.props.refreshHandle();
    }

    //刷新List列表
    refreshHandle = () => {
        console.log("刷新List列表")
        this.props.refreshHandle();
    }

    // (外部调用)
    editHandle  = (resData, odsProStorageId,wlCode,materialCode,productType,stauts) => {
        this.state.selectedRowKeys = null;
        console.log(this);
        this.setState({
            visible: true,
            formTitle: '成品条码冻结',
            dataSource: resData.data,
            odsProStorageId: odsProStorageId,
            wlCode: wlCode,
            materialCode: materialCode,
            productType: productType,
            stauts: stauts,
            selectedRowKeys:[]
        });
        // 重置查询输入项
        this.refs.queryOptions.resetFields();
    }

    handleReason  = (event) => {
        console.log(""+JSON.stringify(event))
        this.setState({
            reason: event
        });
    }


    submit = () => {
        let { selectedRowKeys } = this.state;
          
        if (selectedRowKeys.length > 0) {//判断选择时才能点击按钮
    
            if(this.state.reason==null){
                Modal.error({
                    title: '错误提示',
                    content: '请输入冻结原因',
                });
            return;
            }else{
                    this.setState({loading: true});
                
                    let pstData = [];
                    for(let i = 0; i < selectedRowKeys.length; i++){
                        let tmp = {};
                        tmp.odsProStorageSnId = selectedRowKeys[i];
                        tmp.odsProStorageId = this.state.odsProStorageId;
                        tmp.stauts = '1';
                        tmp.lockReason = this.state.reason;
                        console.log("tmp.lockReason:****************" + tmp.lockReason);
                        pstData.push(tmp);
                    }
                    const options= {
                        url: '/wmsrest/product/odsprostoragesn/ul',
                        type:'POST',
                        contentType: 'application/json; charset=utf-8',
                        condition:JSON.stringify(pstData),
                    };
                    fetchData(this, options, (resData)=>{
                        //回调函数
                        this.props.refreshHandle();
                        if (resData.code == 1) {
                            message.success('操作成功');
                            setTimeout(() => {
                                this.setState({loading: false})
                            }, 2000); //缓冲,防止连击
                        }
                        this.state.selectedRowKeys = null;
                        this.setState(
                            {
                                selectedRowKeys: []
                            }
                            );
                        this.hideModal();
                    });
                }
        }
        else {
            Modal.error({
                title: '错误提示',
                content: '请选择一条或者多条数据',
            });
        }
    }

    onSelectChange = (selectedRowKeys) => {  
        console.log('selectedRowKeys changed: ', selectedRowKeys);  
        this.setState({ selectedRowKeys });  
      }  

    render() {
        //表格复选框
        const { selectedRowKeys } = this.state;  
        const rowSelection = {
            selectedRowKeys,  
             onChange:this.onSelectChange 
        };

        return(
            <Modal
                style={{top:'10px'}}
                visible={this.state.visible}
                title={this.state.formTitle ? this.state.formTitle : '填写表单'}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                width={'1000px'}
                footer=''
            >
            <Query ref="queryOptions"/>
                {
                    <div style={{margin: '10px'}}>
                        <div style={{width: '350px'}}>
                        冻结原因 (必填)：<span style={{paddingBottom:'10px'}}>

                             <Select id="reason"
                                 style={{width:120,color:'#000'}}
                                 onChange={this.handleReason}
                             >
                                      <Option value={'2'}>质量冻结</Option>
                                      <Option value={'4'}>手工冻结</Option>
                            </Select>
                         </span>
                         <Button type="primary" onClick={this.submit}  >冻结</Button>
                        </div>
                        <div >
                        <Table rowSelection={rowSelection}
                               columns={this.columns}
                               dataSource={this.state.dataSource}
                               rowKey={row => row.odsProStorageSnId}
                               showHeader={true}
                               pagination={{pageSize:'80'}}
                               size="small"
                               bordered
                              
                        />
                        </div >
                    </div>
                }


            </Modal>
        )
    }
}